<template>
  <div class="article-detail">
    <van-nav-bar
      title="文章详情"
      left-text="返回"
      left-arrow
      @click-left="router.back()"
    />
    
    <div class="article-content" v-if="article">
      <h1 class="title">{{ article.title }}</h1>
      
      <div class="meta">
        <span>{{ article.author }}</span>
        <span>{{ formatDate(article.createTime) }}</span>
        <span>阅读 {{ article.viewCount }}</span>
      </div>
      
      <div class="cover" v-if="article.coverImage">
        <van-image :src="article.coverImage" fit="cover" />
      </div>
      
      <div class="content" v-html="article.content"></div>
    </div>
    
    <!-- 推荐阅读 -->
    <van-cell-group title="推荐阅读" v-if="recommendArticles.length">
      <van-cell
        v-for="item in recommendArticles"
        :key="item.id"
        :title="item.title"
        is-link
        @click="router.push(`/article/${item.id}`)"
      />
    </van-cell-group>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { getArticleDetail, getRecommendArticles } from '@/api/article'
import { showToast } from 'vant'

const router = useRouter()
const route = useRoute()
const article = ref(null)
const recommendArticles = ref([])

onMounted(async () => {
  const id = route.params.id
  try {
    const { data } = await getArticleDetail(id)
    article.value = data
    
    // 获取推荐文章
    const { data: recommended } = await getRecommendArticles()
    recommendArticles.value = recommended.filter(item => item.id !== id)
  } catch (error) {
    showToast('获取文章详情失败')
  }
})

const formatDate = (date) => {
  return new Date(date).toLocaleString('zh-CN', {
    year: 'numeric',
    month: 'numeric',
    day: 'numeric',
    hour: '2-digit',
    minute: '2-digit'
  })
}
</script>

<style lang="scss" scoped>
.article-detail {
  min-height: 100vh;
  background-color: #fff;
  
  .article-content {
    padding: 16px;
    
    .title {
      font-size: 20px;
      font-weight: bold;
      line-height: 1.4;
      margin: 0 0 12px;
    }
    
    .meta {
      display: flex;
      gap: 12px;
      color: #999;
      font-size: 14px;
      margin-bottom: 16px;
    }
    
    .cover {
      margin-bottom: 16px;
      
      .van-image {
        width: 100%;
        height: 200px;
        border-radius: 8px;
      }
    }
    
    .content {
      font-size: 16px;
      line-height: 1.8;
      color: #333;
      
      ::v-deep(img) {
        max-width: 100%;
        height: auto;
        margin: 12px 0;
      }
      
      ::v-deep(p) {
        margin: 12px 0;
      }
    }
  }
}

@media screen and (min-width: 768px) {
  .article-detail {
    .article-content {
      max-width: 768px;
      margin: 0 auto;
    }
  }
}
</style> 